<template>
  <div>
    <el-drawer
      v-bind="$attrs"
      v-on="$listeners"
      @opened="onOpen"
      @close="onClose"
    >
      <div style="height:100%">
        <el-row style="height:100%;overflow:auto">
          <el-col :span="24" class="left-editor">
            <div class="setting" title="保存" @click="saveJs">
              <el-badge :is-dot="!!resources.length" class="item">
                <i class="el-icon-setting" />
              </el-badge>
            </div>
            <el-tabs v-model="activeTab" type="card" class="editor-tabs">
              <el-tab-pane name="js">
                <span slot="label">
                  <i v-if="activeTab === 'js'" class="el-icon-edit" />
                  <i v-else class="el-icon-document" />
                  script
                </span>
              </el-tab-pane>
            </el-tabs>

            <div v-show="activeTab === 'js'" id="editorJs" class="tab-editor">
              <el-button>确定</el-button>

              <monaco-editor
                @mounted="onMounted"
                :code="jsCode"
                :editorOptions="defaults"
                @codeChange="onCodeChange"
              >
              </monaco-editor>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { parse } from "@babel/parser";
import ClipboardJS from "clipboard";
import { saveAs } from "file-saver";
import {
  exportDefault,
  beautifierConf,
  titleCase
} from "@/components/form-designer/utils/index";
import loadMonaco from "@/components/form-designer/utils/loadMonaco";
import loadBeautifier from "@/components/form-designer/utils/loadBeautifier";

const editorObj = {
  js: null
};
const mode = {
  js: "javascript"
};
let beautifier;
let monaco;

export default {
  components: {},
  props: ["jsStr"],
  data() {
    return {
      activeTab: "js",
      jsCode: "",
      isIframeLoaded: false,
      isInitcode: false, // 保证open后两个异步只执行一次runcode
      isRefreshCode: false, // 每次打开都需要重新刷新代码
      monaco: null,
      defaults: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,
        cursorStyle: "line",
        automaticLayout: true,
        glyphMargin: true,
        showFoldingControls: "always",
        formatOnPaste: true,
        formatOnType: true,
        folding: true
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onMounted(editor) {
      this.editor = editor;
    },
    onCodeChange(editor) {
      // this.editor.trigger('','editor.action.format') // 触发自动格式化
    },
    preventDefaultSave(e) {
      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
      }
    },
    saveJs() {},
    onOpen() {
      this.jsCode = this.jsStr;
      loadBeautifier(btf => {
        beautifier = btf;
        this.jsCode = beautifier.js(this.jsCode, beautifierConf.js);
        console.log(this.jsCode);
        loadMonaco(val => {
          monaco = val;
          this.setEditorValue("editorJs", "js", this.jsCode);
          if (!this.isInitcode) {
            this.isRefreshCode = true;
            this.isIframeLoaded && (this.isInitcode = true) && this.runCode();
          }
        });
      });
    },
    onClose() {
      this.isInitcode = false;
    },
    setEditorValue(id, type, codeStr) {
      if (editorObj[type]) {
        editorObj[type].setValue(codeStr);
      } else {
        editorObj[type] = monaco.editor.create(document.getElementById(id), {
          value: codeStr,
          theme: "vs-dark",
          language: mode[type],
          automaticLayout: true
        });
      }
      // ctrl + s 刷新
      editorObj[type].onKeyDown(e => {
        if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
          this.runCode();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../components/form-designer/styles/mixin.scss";
.tab-editor {
  position: absolute;
  top: 33px;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 14px;
}
.left-editor {
  position: relative;
  height: 100%;
  background: #1e1e1e;
  overflow: hidden;
}
.setting {
  position: absolute;
  right: 15px;
  top: 3px;
  color: #a9f122;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}
.right-preview {
  height: 100%;
  .result-wrapper {
    height: calc(100vh - 33px);
    width: 100%;
    overflow: auto;
    padding: 12px;
    box-sizing: border-box;
  }
}
@include action-bar;
::v-deep .el-drawer__header {
  display: none;
}
</style>
